import { defineStore } from 'pinia'
import {ref, watch} from 'vue'
import Logo from '@/assets/logo.png'
import {getPlayListSongsService} from "@/apis/playlist"

export const usePlayListStore = defineStore(
    'playlist',
    () => {
        const list = ref<song_info[]>([])
        const listId = ref<number>(0)
        const playListImg = ref<string>(Logo)
        const playListName = ref("播放列表")

        const setList = () => {

        }
        const getPlayListInfo = async (id: number)=> {
            const res = await getPlayListSongsService(id)
            list.value = res.data as song_info[]
            if(res.data.length > 0)
            {
                res.data.forEach((item: song_info) => {
                    if(item.album_cover !== '' && item.album_cover !== null)
                    {
                        playListImg.value = item.album_cover
                    }
                })
            }
        }

        const refreshPlayList = async () =>{
            if(listId.value !== 0)
            {
                await getPlayListInfo(listId.value)
            }

        }

        watch(listId, async(newValue)=>{
            playListImg.value = Logo
            await getPlayListInfo(newValue)
        })

        return {
            getPlayListInfo,
            setList,
            list,
            listId,
            playListImg,
            playListName,
            refreshPlayList
        }
    },
    {
        persist: false
    }
)
